<!--
ch.4
canvas 
-->
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style>
            p{
                font-size:20px;
            }
            button{
                font-size: medium
            }
            .blue{
                color:blue;
            }
            .green{
                color:green;
            }
            .red{
                color:red;
            }
            #paint{
                p
            }
        </style>
    </head>
    <body>
        <div>
            <canvas id="paint" height="450" width="300" style="border:1px dotted green"></canvas>
            
            <script type="text/javascript">
                var canvas = document.getElementById('paint');
                var ctx = canvas.getContext('2d');
                ctx.fillStyle = '#c12';
                ctx.fillRect(30, 40, 80, 100);
                ctx.lineJoin='bevel';
                ctx.lineWidth=10;
                ctx.strokeStyle='#c12';
                ctx.strokeRect(30,40,150,150);
                ctx.fillStyle='#08f';
                ctx.font='italic 50px 隶书';
                ctx.textBaseline='top';
                ctx.fillText('canvas',50,250);
                ctx.fillText('savnac',50,200);
                function changecolor(newcolor){
                    var p=document.getElementById("par");
                    p.style.color=newcolor;
                }
            </script>
            <p id="par">change the color</p>
            <button class="blue" onclick="changecolor('blue');">blue</button>
            <button class="red" onclick="changecolor('red');">red</button>
            <button class="green" onclick="changecolor('green');">green</button>
        </div>
    </body>
</html>
